<template>
  <div class="about">
    <Top />
    <div class="head">
      <div>
        <input
          type="text"
          v-model="text"
          placeholder="请输入你的心愿"
          @blur="bgc1"
        />
      </div>
      <div class="head-qiu">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="qiu"
          :style="{ background: item.bgc }"
          @click="bgc1(item.bgc)"
        ></div>
      </div>
      <div>
        <van-button disabled v-show="!a1">再想想</van-button>
        <van-button type="primary" v-show="a1" @click="xy">许愿</van-button>
      </div>
      <div id="yr2">
        <div
          v-drag
          v-for="(item, index) in this.$store.state.list1"
          :key="index"
          :style="{ background: item.color, left: item.left, top: item.top }"
          class="yr"
        >
          {{ item.text }}<button @click="xixi(index)">删除</button>
        </div>
      </div>
    </div>
    <div class="a2">昵称:{{ this.$store.state.list[0] }}</div>
  </div>
</template>
<script>
import Top from "../components/top/top.vue";

export default {
  components: {
    Top,
  },
  data() {
    return {
      text: "",
      list: [
        { bgc: "red" },
        { bgc: "blue" },
        { bgc: "black" },
        { bgc: "pink" },
        { bgc: "yellow" },
      ],
      bgc: "",
      a1: false,
      list1: [],
      y1: "",
    };
  },
  mounted() {
    console.log(this.$store.state.list1);
  },
  methods: {
    bgc1(i) {
      this.bgc = i;

      if (this.text != "" && this.bgc != "") {
        this.a1 = true;
      } else {
        this.a1 = false;
      }
    },
    xixi(i) {
      this.$store.commit("ON_change3", i);
    },
    xy() {
      this.a1 = false;
      console.log(this.list1);
      if (this.list1.lenght >= 4) {
        alert("最多提交五个");
        return;
        this.text = "";
        this.bgc = "";
      } else {
        this.list1.push({
          text: this.text,
          color: this.bgc,
          top: parseInt(Math.random() * (200 - 0 + 1) + 1) + "px",
          left: parseInt(Math.random() * (200 - 0 + 1) + 1) + "px",
        });
        this.text = "";
        this.bgc = "";

        this.$store.commit("ON_change2", this.list1);
      }
    },
  },
  directives: {
    drag: {
      inserted: (el) => {
        let touch, disX, disY;

        el.ontouchstart = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          }
          disX = touch.clientX - el.offsetLeft; //鼠标位置X减去元素距离左边距离（鼠标到元素左边的距离）
          disY = touch.clientY - el.offsetTop; //鼠标位置Y减去距离顶部距离（鼠标到元素顶部的高度）
        };
        el.ontouchmove = (e) => {
          if (e.touches) {
            //有可能对象在e上也有可能对象在e.touches[0]上
            touch = e.touches[0];
          } else {
            touch = e;
          } //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = touch.clientX - disX;
          let top = touch.clientY - disY; //移动当前元素

          el.style.left = left + "px";
          el.style.top = top + "px";
          e.preventDefault(); //阻止页面的滑动默认事件
          console.log(e.target);
        };
      },
    },
  },
};
</script>
<style lang="scss">
.head-qiu {
  width: 100vw;
  height: 20vh;
  display: inline-flex;
  justify-content: space-around;
  .qiu {
    margin-top: 5vh;
    width: 15vw;
    height: 15vw;
    border-radius: 50%;
  }
}
.yr {
  width: 20vw;
  height: 20vw;
  text-align: center;
  position: absolute;
}
#yr2 {
  width: 100vw;
  height: 60vh;
  position: relative;
  overflow: hidden;
}
.about {
  position: relative;
  .a2 {
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
